<template>
	<view class="address-item">
		<view class="title"> {{addressInfo.name}} {{addressInfo.phone}} </view>
		<view class="address"> {{ address }} </view>
		<view class="bot">
			<view class="check">
				<view class="icon" :class="addressInfo.is_default==1? 'a-icon':''" @tap="checked" ></view>
				<view class="text"> 设为默认 </view>
			</view>
			<view class="btn" v-if="!isEdit">
				<view @tap="modalRef.open()"> 删除 </view>
				<view @tap="edit"> 编辑 </view>
			</view>
		</view>
		<Modal ref="modalRef" tips="是否删除该收货地址？" @confirm="del"/>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import Modal from '@/components/Modal.vue'
	import { SetDefaultAddressApi, DelAddressApi } from '@/service/index.js'
	import { useAddressStore } from '@/store/index.js'
	const props = defineProps(['addressInfo', 'isEdit'])
	const modalRef = ref()
	// const addressInfo = ref({})
	const address = computed(() => {
		const { modify_region, addr } = props.addressInfo
		return modify_region.name + ' ' + addr
	})
	const del = () => {
		const { SETADDRESS } = useAddressStore()
		modalRef.value.close()
		DelAddressApi({id: props.addressInfo.id}).then(() => {
			SETADDRESS()
		})
	}
	const edit = () => {
		uni.navigateTo({
			url: `/pages/address/addEditAddress?address=${JSON.stringify(props.addressInfo)}`
		})
	}
	const checked = () => {
		if(props.addressInfo.is_default == 1) return
		const { SETADDRESS } = useAddressStore()
		SetDefaultAddressApi({id: props.addressInfo.id}).then(() => {
			SETADDRESS()
		})
	}
</script>

<style lang="scss" scoped>
	.address-item {
		width: 100%;
		margin-bottom: 10px;
		border-radius: 10px;
		background-color: #fff;
		padding: 16px 14px 10px;
		box-sizing: border-box;
		.title {
			font-weight: bold;
			font-size: 14px;
			color: #333333;
			line-height: 16px;
		}
		.address {
			font-weight: 400;
			font-size: 14px;
			color: #666666;
			line-height: 21px;
			margin: 6px 0 2px;
		}
		.bot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.check {
				display: flex;
				align-items: center;
				.icon {
					width: 14px;
					height: 14px;
					margin-right: 6px;
					border-radius: 50%;
					border: 1px solid #C5CAD5;
					&.a-icon {
						border: #FF3B1E 1px solid;
						position: relative;
						&::before {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							display: block;
							content: '';
							width: 6px;
							height: 6px;
							background-color: #FF3B1E;
							border-radius: 50%;
						}
					}
				}
				.text {
					color: #999999;
					font-size: 12px;
					font-weight: 400;
					line-height: 21px;
				}
			}
			.btn {
				display: flex;
				view {
					width: 48px;
					height: 21px;
					color: #666666;
					font-size: 12px;
					font-weight: 400;
					line-height: 21px;
					text-align: center;
					background: #F3F3F3;
					border-radius: 76px;
					margin-left: 10px;
				}
			}
		}
	}
</style>